<template>
  <div>
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增品牌</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- bottom -->
    <div class="bottom_list">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input v-model="form.name" :placeholder="this.forms.brandName"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" :placeholder="this.forms.sort"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload class="upload-demo" action="http://127.0.0.1:7001/api/loadUp" :on-success="handleAvatarSuccess">
            <img :src="this.forms.image" alt="" class="images" />
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示位置">
          <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定添加</el-button>
          <el-button @click="falsup">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uPjadmin } from '../../../api/index'
export default {
  data() {
    return {
      form: {
        //品牌名称
        name: '',
        //排序
        sort: '',
        resource: '1',
        //展示的位置
        desc: '',
      },
      fileList: [],
      forms: {
        id: '',
        brandName: '',
        image: '',
        sort: '',
        xianshi: '',
      },
    }
  },
  created() {
    this.mett()
  },
  methods: {
    mett() {
      this.forms.id = this.$route.query.id
      this.forms.brandName = this.$route.query.brandName
      this.forms.image = this.$route.query.image
      this.forms.sort = this.$route.query.sort
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.fileList.push('http://127.0.0.1:7001' + res.data)
      //   console.log(this.fileList)
      // console.log(res, file)
    },
    //添加
    onSubmit() {
      let obj = {
        id: this.forms.id,
        brandName: this.form.name,
        image: this.fileList,
        sort: this.form.sort,
        xianshi: this.form.resource,
      }
      if (this.form.name != '' && this.fileList != '' && this.form.sort != '' && this.form.resource != '') {
        uPjadmin(obj).then((res) => {
          console.log(res)
          this.$router.push({
            name: 'brand',
          })
        })
      }
    },
    //取消
    falsup() {
      this.$router.push({
        name: 'brand',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
  margin-bottom: 40px;
}
//bottom
.bottom_list {
  width: 400px;
  height: 400px;
}

.images {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 30px;
  position: relative;
  top: 10px;
}
</style>
